<template>
  <div>
    <div class="v1">
      <el-button class="v2" type="danger" @click="re">充值会员</el-button>
    </div>
    <el-dialog title="VIP充值" v-model="dialogVisible2" width="60%" :before-close="handleClose">
      <div class="vv">
        <div class="v3">
          <span class="v4">我的会员</span>
          <span class="v5">
            {{ vip }}
          </span>
        </div>

        <div class="v6">
          <span class="v7">选择充值套餐</span>
        </div>

        <div :style="s4" @click="c1">
          <span class="v8"
            >连续包月:<br />
            9.9元/月</span
          >
        </div>
        <div :style="s2" @click="c2">
          <span class="v8"
            >季度会员:<br />
            39.9元/季</span
          >
        </div>
        <div :style="s3" @click="c3">
          <span class="v8"
            >年度会员:<br />
            109.9元/年</span
          >
        </div>
        <div>
          <el-button type="success" class="v9" style="width: 50%; height: 50px" @click="pay"
            >立即支付</el-button
          >
        </div>
        <div>
          <el-button type="danger" class="v10" style="width: 50%; height: 50px" @click="quit"
            >取消支付</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import '@/assets/scss/userCom/vip.scss'
const dialogVisible2 = ref(false)
const vip = ref('暂无会员LV0')
const s1 = ref(
  'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
)
const s2 = ref(
  'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
)
const s3 = ref(
  'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
)
const s4 = ref(
  'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 100px;'
)
const re = () => {
  dialogVisible2.value = true
  const uid = JSON.parse(sessionStorage.getItem('uid'))
  const vid = JSON.parse(sessionStorage.getItem('vid'))
  if (vid !== 0) {
    axios.get('api/vip/isVip/' + uid).then((res) => {
      if (res.data === 'YES') {
        vip.value = '超级会员LV1'
        s1.value = 'font-size: large;color: red'
      } else {
        vip.value = '会员过期LV1'
      }
    })
  }
}
function c1() {
  s2.value =
    'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
  s3.value =
    'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
  s4.value =
    'width: 150px;height: 100px;background-color: orange;display: flex;float: left;margin-left: 100px;'
}
const c2 = () => {
  s2.value =
    'width: 150px;height: 100px;background-color: orange;display: flex;float: left;margin-left: 30px;'
  s3.value =
    'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
  s4.value =
    'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 100px;'
}
const c3 = () => {
  s2.value =
    'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 30px;'
  s3.value =
    'width: 150px;height: 100px;background-color: orange;display: flex;float: left;margin-left: 30px;'
  s4.value =
    'width: 150px;height: 100px;background-color: wheat;display: flex;float: left;margin-left: 100px;'
}
const quit = () => {
  dialogVisible2.value = false
}
const pay = () => {
  if (JSON.parse(sessionStorage.getItem('isVip')) === 'YES') {
    ElMessage({
      showClose: true,
      message: '您已是会员，无需充值！',
      type: 'error'
    })
    dialogVisible2.value = false
  } else {
    axios.get('/api/user/vipPay/' + JSON.parse(sessionStorage.getItem('uid'))).then((res) => {
      alert('充值成功！')
      sessionStorage.setItem('vid', JSON.stringify(res.data.vid))
      sessionStorage.setItem('isVip', JSON.stringify('YES'))
      router.go(0)
    })
  }
}
</script>
